<!--
* description: 订单手工分配-查看明细
-->
<template>
  <section class="editBigAreaInfo">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      title="备件订单明细"
      :append-to-body="true"
      :visible.sync="curPopupsVisible"
      width="70%"
      @close="closeEdit"
      @open="open"
    >
      <dialogHeader
        slot="title"
        title="备件订单明细"
        :style-type="$store.state.app.dialogType"
      />
      <one-table-template
        ref="multipleTable"
        :dynamic-buttons="tableButtons"
        :dynamic-components="tableComponents"
        :dynamic-api-config="dynamicApiConfigs"
        :dynamic-table-cols="tableCols"
        :dynamic-form-fields="formField"
        :dynamic-is-show-select="false"
        :dynamic-table-defult-height="350"
        :dynamic-is-init-table="true"
        :dynamic-is-fix-choose="false"
        :dynamic-is-fix-index="false"
        :is-show-pagination="false"
        :dynamic-api-style="'restful'"
      />
    </el-dialog>
  </section>
</template>
<script>
import { formMixins } from '@/components/mixins/formMixins'
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import { orgApis } from '@/api/paSparePartsManagement'

export default {
  components: {
    OneTableTemplate,
    dialogHeader: () => import('@/components/dialogHeader')
    // mixButton: () => import("@/components/basicComponent/mixButton"),
  },

  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins, formMixins],

  props: {
    popupsVisible: { type: Boolean, default: false },
    // 从网格传入的编辑行数据(json)
    dynamicEditRowData: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },

  data() {
    const viewPageCode = 'bigAreaInfo-edit'
    return {
      dynamicApiConfigs: orgApis.queryDetailDown,
      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'isCanLack',
              label: '可欠拨',
              align: 'center',
              isFlag: true
              // isShowLabel: false,
              // isComponent: true,
              // comps: [
              //   {
              //     compKey: 'audit',
              //     codeField: 'isCanLack',
              //     component: () => import('@/components/org/checkBox')
              //   }
              // ]
            },
            {
              prop: 'dlrCode',
              label: '网点编码',
              align: 'center'
            },
            {
              prop: 'dlrShortName',
              label: '网点名称',
              align: 'center'
            },
            {
              prop: 'purOrderCode',
              label: '订单号',
              align: 'center'
            },
            {
              prop: 'partNo',
              label: '备件号',
              align: 'center'
            },
            {
              prop: 'partName',
              label: '备件名称',
              align: 'center'
            },
            {
              prop: 'unit',
              label: '计量单位',
              align: 'center'
            },
            {
              prop: 'minPurchasePage',
              label: '最小订货数',
              align: 'center'
            },
            {
              prop: 'purPrice',
              label: '单价',
              align: 'center'
            },
            {
              prop: 'purQty',
              label: '订货数量+',
              align: 'center'
            },
            {
              prop: 'purAmount',
              label: '订货金额',
              align: 'center'
            },
            {
              prop: 'sumAccountQty',
              label: '库存数量',
              align: 'center'
            },
            {
              prop: 'availableInventory',
              label: '可用库存',
              align: 'center'
            },
            {
              prop: 'validLackQty',
              label: '有效欠拨数量',
              align: 'center'
            },
            // {
            //   prop: 'assignWorkCode',
            //   label: '派工单号+',
            //   align: 'center'
            // },
            // {
            //   prop: 'vin',
            //   label: 'VIN码+',
            //   align: 'center'
            // },
            // {
            //   prop: 'carLicense',
            //   label: '车牌号+',
            //   align: 'center'
            // },
            // {
            //   prop: 'custName',
            //   label: '客户名称+',
            //   align: 'center'
            // },
            // {
            //   prop: 'custTel',
            //   label: '客户电话+',
            //   align: 'center'
            // }
          ],

      // 表单数据（无需赋值，由混入对象赋值）
      formField: this.$utils.getFormField(
        this,
        {
          purchaseOrderId: '',
          updateControlId: '',
          dlrId: ''
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      )
    }
  },
  watch: {
    'curPopupsVisible': {
      handler(val, old) {
        const that = this
        if (val == true) {
          // console.log(this.dynamicEditRowData, 'this.dynamicEditRowData')
          // this.formField = {
          //   purchaseOrderId: this.dynamicEditRowData.purchaseOrderId,
          //   updateControlId: this.dynamicEditRowData.updateControlId,
          //   dlrId: this.dynamicEditRowData.dlrId
          // }
          this.formField.purchaseOrderId = this.dynamicEditRowData.purchaseOrderId
          this.formField.updateControlId = this.dynamicEditRowData.updateControlId
          this.formField.dlrId = this.dynamicEditRowData.dlrId
          that.queryTable(1, '', -1, '')
        }
      },
      deep: true,
      immediate: true
    }
  },

  methods: {
    // open() {
    // },
    // 关闭弹窗
    closeEdit() {
      this.curPopupsVisible = false
      this.$emit('close', false)
    }
  }
}
</script>

<style lang="scss" scoped>
// .promptSpan {
//   position: absolute;
//   bottom: 26px;
//   right: 335px;
//   color: #e70020;
// }
/deep/ .el-dialog__title {
  border-bottom: 0px !important;
}
</style>

